<template>
<div>
    <!-- 头部所搜区域 -->
    <div class="itemMusicTop">
        <img :src="playlist.coverImgUrl" alt="背景图"  class="bgimg"/>
        <div class="itemleft">
            <van-icon name="arrow-left" class="icon" @click="$router.go(-1)"/>
            <span>歌单</span>
        </div>
        <div class="itemRifght">
            <van-icon name="search"  class="icon"/>
            <van-icon name="wap-nav" class="icon"/>
        </div>  
    </div>
    <!-- 歌曲作者介绍区域 -->
    <div class="itemTopContent">
        <!-- 左边图片区域 -->
        <div class="contentLeft">
            <img :src="playlist.coverImgUrl" alt="">
            <div class="palyCount">
                <van-icon name="play"  class="play"/>
                <span>{{changeCount(playlist.playCount)}}</span>
            </div>    
        </div>
        <!-- 右边作者名字动态区域 -->
        <div class="contentRight">
            <p class="rightP_one">{{playlist.name}}</p>
            <!-- 作者名字和头像 -->
            <div class="rightt_img">
                <img :src="playlist.creator.backgroundUrl" alt="">
                <span>{{playlist.creator.nickname }}</span>
                <van-icon name="arrow" class="rightt_img_icon"/>
            </div>
            <!-- 歌曲描述 -->
            <p class="rightP_two">
                <span>{{playlist.description}}</span>
                <van-icon name="arrow"  class="rightP_two_icon"/>
            </p>
        </div>
    </div>
    <!-- 品论分享下载多选区域 -->
    <div class="itemTopFooter">
        <div class="footerItem">
            <van-icon name="chat-o" class="footerItem-icon"/>
            <span>{{playlist.commentCount}}</span>
        </div>
        <div class="footerItem">
               <van-icon name="share-o" class="footerItem-icon"/>
            <span>{{playlist.shareCount}}</span>
        </div>
        <div class="footerItem">
                <van-icon name="down" class="footerItem-icon"/>
            <span>下载</span>
        </div>
        <div class="footerItem">
                <van-icon name="certificate" class="footerItem-icon"/>
            <span>多选</span>
        </div>
    </div>
</div>
   

</template>
<script>
export default {
    setup(props){
        //通过 props 进行传值，判断如果数据拿不到，就获取sessionStorage中的
        if((props.playlist.creator="")){
            props.playlist.creator = JSON.parse(sessionStorage.getItem().playlist).creator;
        }
          function changeCount(num){
            if(num>=100000000){
                return (num/100000000).toFixed(1) + "亿"
            }else if(num/10000){
                return (num/10000).toFixed(1) + "万"
            }
        }
        //返回出去
        return {changeCount}
    },
    //接收
    props:['playlist']
}
</script>
<style lang="less" scoped>
.itemMusicTop{
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1rem;
    position: relative;
    .itemleft, .itemRifght{
       width: 25%;
       height: 100%;
       display: flex;
       justify-content: space-between;
       font-size: .4rem; 
       align-items: center;
       margin: 0 0.2rem;
       color:#fff;
       .icon{
        font-size:.5rem;
       }
    }       
    }
    span{
        font-size: .4rem;
        color:#fff;
    }
   
   
    .bgimg{
        width: 97%;
        height:11rem;
        position: absolute;
        z-index: -1;
         /** 背景虚化 */
        filter: blur(.4rem);
        
    }
.itemTopContent{
    width: 100%;
    height: 3rem;
    padding: 0.2rem;
    margin-top: 0.4rem;
    display: flex;
    justify-content: space-between;
    .contentLeft{
        width: 36%;
        height: 2.6rem;
        position: relative;
    }
}
img{
    width: 2.6rem;
    height: 2.6rem;
    position: absolute;
    z-index: -1;
    border-radius: 0.2rem;
}
.palyCount{
    position: absolute;
    right: 0.1rem;
    margin-top: 0.1rem;
    .play{
        font-size:.26rem;
        color: #fff;
    }
    span{
        font-size: 0.26rem;
        color: #fff;
    }
}
.contentRight{
    width: 60%;
    height: 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .rightP_one{
        font-size: 0.3rem;
        font-weight: 900;
        color: #fff;
        font-family: "微软雅黑";
    }
    .rightt_img{
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        img{
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 1rem;
            vertical-align: middle;
        }
        span{
            margin-left: .7rem;
            font-size: .2rem;
        }
        .rightt_img_icon{
            color: #fff;
        }
    }

}
.rightP_two{
    width: 100%;
    height: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span{
        display: inline-block;
        width: 95%;
        height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 0.24rem;
        color: #ccc;
    }
    .rightP_two_icon{
        color: #ccc;
    }
}

// 品论 分享 下载 区域
.itemTopFooter{
    width: 100%;
    height: 1.4rem;
    display: flex;
    justify-content: space-around;
    margin-top: .2rem;
}
.footerItem{
    display: flex;
    // 垂直显示
    flex-direction: column;
    align-items: center; //水平居中
    color: #fff;
    span{
        font-size: .25rem;
    }
    .footerItem-icon{
        font-size: .45rem;
    }
}
</style>